﻿<template>
  <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '80%' class = 'main_dialog md_dialog' @close = "closeDialog"
  :close-on-click-modal = 'false' :close-on-press-escape = 'false' append-to-body>
    <el-form :label-width = 'labelWidth'
    element-loading-text = '数据获取中...' v-loading = 'formLoading'>
      <el-form-item>
        <div class = 'page_tableContent'>
          <!-- pop单选表 -->
          <el-table :data = 'table.tableData' style='width:100%' stripe border max-height = '450' min-height = '180'>
            <el-table-column align = 'center' v-for = '(PopItem, popIndex) in table.tableColumn'  show-overflow-tooltip
            :key = 'PopItem.text + popIndex' :label = 'PopItem.text'>
              <template slot-scope = 'scope'>
                <el-radio  @click.native.prevent = "clickItemText(scope.row[PopItem.tableIndex], scope.row)"
                v-if = "PopItem.tableIndex === valueKey" :label = 'scope.row[PopItem.tableIndex]' v-model = 'currentTemplateId'></el-radio>
                <span v-else>{{scope.row[PopItem.tableIndex]}}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 底部的分页功能 -->
          <el-pagination background v-if = 'totalLength > 10' style = 'margin-top:10px;margin-bottom:-15px;'
          @size-change = "handleSizeChange" @current-change = "handleCurrentChange"
          :current-page.sync = "currentPage" :page-size = 'pageSize'
          :page-sizes = "[10, 25, 50, 100]" layout = "total, sizes, prev, pager, next" :total = 'totalLength'>
          </el-pagination>
        </div>
      </el-form-item>
      <el-form-item class = 'form_noLeftMargin'>
        <el-button type = 'info'  @click = "resetForm">取 消</el-button>
        <el-button type = "primary" @click = "submitForm">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import axios from 'axios'
export default {
  props: ['showPopDialog', 'defaultTemplateId'],
  data () {
    return {
      dialogTitle: '选择扩展参数模板',
      dialogFormVisible: false,
      labelWidth: '0',
      formLoading: false,
      // 当前选中的模板的信息
      currentTemplateId: '',
      table: {
        tableData: [],
        tableColumn: []
      },
      valueKey: '',
      // 页码相关
      totalLength: 0,
      currentPage: 1,
      pageSize: 10,
      // 元数据表的uid
      metauid: '08576577-229d-4db5-bd4b-513a67f62e5e',
      // 关联的字段
      refIndexName: 'template'
    }
  },
  methods: {
    // 初始化
    initDialog () {
      this.table.tableColumn = []
      this.totalLength = 0
      this.currentPage = 1
      this.pageSize = 10
      this.valueKey = ''
      // 当前选中的模板的信息
      this.currentTemplateId = this.defaultTemplateId || ''
      this.getPopData()
    },
    // 获取popData
    getPopData () {
      this.formLoading = true
      this.table.tableData = []
      // 获取知识库系统中设置的所有的模板
      axios({
        method: 'patch',
        url: $URL.KB_API_URL + '/md_form/pop/' + this.metauid + '/' + this.refIndexName,
        data: {
          this_data: '',
          limit: this.pageSize,
          page: this.currentPage
        }
      }).then(data => {
        let dataInfo = data.data.result
        if (dataInfo.code === 'failed') {
          this.$message({
            message: dataInfo.msg,
            type: 'error'
          })
        } else if (dataInfo.code === 'success') {
          this.valueKey = dataInfo.column_value
          this.totalLength = dataInfo.total_count
          // 生成表头
          this.table.tableColumn = []
          if (dataInfo.column_show.length) {
            dataInfo.column_show.forEach((val, index) => {
              let objExam = {}
              if (val.column_desc) {
                objExam = {
                  text: val.column_desc,
                  tableIndex: val.column_name
                }
              } else {
                objExam = {
                  text: val.column_name,
                  tableIndex: val.column_name
                }
              }
              this.table.tableColumn.push(objExam)
            })
            let keyColumn = {
              text: this.valueKey,
              tableIndex: this.valueKey
            }
            this.table.tableColumn.unshift(keyColumn)
          }
          // 生成表格的内容
          if (dataInfo.data.length) {
            dataInfo.data.forEach((val, index) => {
              this.$set(this.table.tableData, index, val)
            })
          }
        }
        this.formLoading = false
      }).catch(error => {
        console.log(error)
      })
    },
    // 点击单选框按钮时
    clickItemText (e, row) {
      this.currentTemplateId === e ? this.currentTemplateId = '' : this.currentTemplateId = e
    },
    // 点击弹窗的确定按钮
    submitForm () {
      this.$emit('closePopDialogSuccess', this.currentTemplateId)
    },
    // 点击弹窗的取消按钮
    resetForm () {
      this.$emit('closePopDialog')
    },
    closeDialog () {
      this.$emit('closePopDialog')
    },
    // 底部页码的部分
    handleSizeChange (val) {
      this.pageSize = val
      this.getPopData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getPopData()
    }
  },
  watch: {
    showPopDialog: {
      handler: function (val, oldVal) {
        this.dialogFormVisible = val
        if (val) {
          this.initDialog()
        }
      },
      deep: true
    }
  }
}
</script>
